<template>
  <div>
    <div class="mb-15">ins进入可以输入 Esc退出输入下面命令 :wq 保存并退出 :q! 强制退出</div>
    <div class="mb-15">端口：3306记得开</div>
    <div class="newServer-css-but">
      <el-button type="primary" size="medium" @click="operationClick('jdk')">java jdk安装</el-button>
      <el-button type="success" size="medium" @click="operationClick('mysql')">mysql 安装</el-button>
      <el-button type="info" size="medium" @click="operationClick('nginx')">nginx 安装</el-button>
      <el-button type="warning" size="medium" @click="operationClick('ssl')">ssl配置https</el-button>
    </div>
    <!--java jdk安装-->
    <div class="newServer-css-content" v-if="active=='jdk'">
      <div class="title">java jdk安装</div>
      <ul class="copy-content">
        <li v-for="(item,key) in jdkJson" :key="key">
          <el-button :type="item.butType" @click="copyLink(item.text,key)" class="tag">复制</el-button>
          <span>{{ item.text }}</span>
        </li>
      </ul>
    </div>

    <!--mysql 安装-->
    <div class="newServer-css-content" v-if="active=='mysql'">
      <div class="title">mysql 安装</div>
      <ul class="copy-content">
        <li v-for="(item,key) in mysqlJson" :key="key">
          <el-button :type="item.butType" @click="copyLink(item.text,key)" class="tag">复制</el-button>
          <span>{{ item.text }}</span>
          <span v-if="item.notes" class="ml-12">{{ item.notes }}</span>
        </li>
      </ul>
    </div>


    <!--nginx 安装-->
    <div class="newServer-css-content" v-if="active=='nginx'">
      <div class="title">nginx 安装</div>
      <ul class="copy-content">
        <li v-for="(item,key) in nginxJson" :key="key">
          <el-button :type="item.butType" @click="copyLink(item.text,key)" class="tag">复制</el-button>
          <span>{{ item.text }}</span>
          <span v-if="item.notes" class="ml-12">{{ item.notes }}</span>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
import Clipboard from "clipboard";

export default {
  components: {},
  props: [],
  data() {
    return {
      active: '',
      // jdk state 已用 1

      //jdk 数据
      jdkJson: [
        //  text 复制的内容  butType 按钮颜色执行到哪步了好分辨
        {text: 'cd ..', butType: ''},
        {text: '把jdk-8u271-linux-x64.tar.gz 复制到根目录', butType: ''},
        {text: 'tar -zxvf jdk-8u271-linux-x64.tar.gz -C /data', butType: ''},
        {text: 'vi /etc/profile', butType: ''},
        {text: '', state: 1, butType: ''},
        {text: 'source /etc/profile', butType: ''},
        {text: 'java -version', butType: ''},
      ],
      //nginx 安装
      nginxJson: [
        {text: 'yum install gcc-c++', butType: '', notes: '备注：编译依赖gcc环境，如果没有gcc环境'},
        {text: 'yum -y install openssl openssl-devel', butType: '', notes: '备注：安装openssl依赖库'},
        {text: 'yum -y install pcre-devel', butType: '', notes: '备注：安装pcre-devel依赖库'},
        {text: 'tar -zxf nginx-1.20.2.tar.gz', butType: '', notes: '备注：上传nginx到服务器上并解压'},
        {text: 'cd nginx-1.20.2', butType: '', notes: '备注：进入解压出来的目录'},
        {text: './configure --with-http_ssl_module', butType: '', notes: '备注：执行自动配置有配置https'},
        {text: 'make', butType: '', notes: '备注：执行make命令 把文件编译'},
        {text: 'make install', butType: '', notes: '备注：执行make install'},
        {text: 'whereis nginx', butType: '', notes: '备注：验证是否成功 有返回/usr/local/nginx 路径就对了'},

        {text: '', butType: '', notes: '备注：基础操作'},
        {text: 'cd /usr/local/nginx/sbin', butType: '', notes: '备注：进入这里才能使用 ./nginx 命令'},
        {text: './nginx -v', butType: '', notes: '备注：查看nginx版本'},
        {text: './nginx', butType: '', notes: '备注：启动nginx'},
        {text: './nginx -s stop', butType: '', notes: '备注：停止nginx'},
        {text: './nginx -s quit', butType: '', notes: '备注：安全退出nginx，同时会关闭nginx服务'},
        {text: './nginx -s reload', butType: '', notes: '备注：重新加载配置文件（不需要重新启动nginx，也会生效）'},
        {text: 'ps -ef | grep nginx', butType: '', notes: '备注：查看nginx的进程'},
      ],

      //mysql 数据
      mysqlJson: [
        {text: 'cd ..', butType: ''},
        {text: 'rpm -qa | grep mysql', butType: '', notes: '备注：检测系统是否自带mysql'},
        {text: 'rpm -e --nodeps 上一步查找的名称', butType: '', notes: '备注：如果有用这命令进行删除'},
        //     1.删除成功后，查询所有Mysql对应的文件夹
        // [root@localhost ~]# whereis mysql
        // mysql: /usr/bin/mysql /usr/data/mysql[root@localhost ~]# find / -name mysql
        // /run/lock/subsys/mysql
        // /etc/rc.d/init.d/mysql
        // /usr/bin/mysql
        // /usr/data/mysql
        // /usr/data/mysql/bin/mysql
        // /usr/data/mysql/include/mysql
        // /usr/data/mysql/data/mysql
        // 1.删除上面查找的所有文件夹
        {text: 'whereis mysql', butType: '', notes: '备注：删除成功后，查询所有mysql对呀的文件夹，删除，代码里面注释了'},
        {text: '', butType: '', notes: '备注：开始安装'},
        {text: '把mysql-5.7.31.tar.gz 复制到根目录', butType: ''},
        {text: 'tar -zxvf mysql-5.7.31.tar.gz -C /data', butType: ''},
        {text: 'cd data/', butType: ''},
        {text: 'mv mysql-5.7.31-linux-glibc2.12-x86_64/ mysql', butType: ''},
        {text: 'mkdir mysql/data', butType: ''},
        {text: 'cat /etc/group | grep mysql', butType: ''},
        {text: 'cat /etc/passwd | grep mysql', butType: ''},
        {text: 'groupadd mysql', butType: ''},
        {text: 'useradd -r -g mysql mysql', butType: ''},
        {text: 'chown -R mysql:mysql /data/mysql/', butType: ''},
        {text: 'chmod -R 755 /data/mysql', butType: ''},
        {text: 'cd mysql/bin/', butType: ''},
        {text: 'yum -y install libaio-devel.x86_64', butType: ''},
        {text: './mysqld --initialize --user=mysql --datadir=/data/mysql/data/ --basedir=/data/mysql/', butType: '', notes: '备注：并记住日志最后的初始化密码（记住）'},
        {text: 'rpm -qa|grep libaio', butType: ''},
// 以上不行的话如下操作(华为云就是如此)：
// cd /etc/yum.repos.d
// mkdir yumbak
// mv *.repo yumbak
//     wget -O /etc/yum.repos.d/CentOS-Base.repo https://repo.huaweicloud.com/repository/conf/CentOS-8-reg.repo  下载完拷进去也可以。
//         sed -i "s/\$releasever/8-stream/g" /etc/yum.repos.d/CentOS-Base.repo
//     yum clean all
//     yum makecache
//     yum list
        {text: 'vi /etc/my.cnf', butType: ''},
        {text: '', state:2, butType: '',notes:'看着改'},
        {text: '用软件打开/data/mysql/support-files/mysql.server 把里面的/usr/local 改成 /data', butType: '',},
        {text: 'ln -s /data/mysql/support-files/mysql.server /etc/init.d/mysql', butType: '',},
        {text: 'ln -s /data/mysql/bin/mysql /usr/bin/mysql', butType: '',},
        {text: 'service mysql restart', butType: '',},
        {text: 'mysql -h 127.0.0.1 -P 3306 -u root -p', butType: '',notes:'密码就是前面保存起来的密码'},
        {text: "set password for root@localhost = password('123456789');", butType: ''},
        {text: "use mysql;", butType: ''},
        {text: "update user set user.Host='%' where user.User='root';", butType: ''},
        {text: "flush privileges;", butType: ''},
        {text: 'grant all privileges on *.* to root@"%" identified by "123456789";', butType: ''},
        {text: 'flush privileges;', butType: ''},
        {text: "quit", butType: '',},
        {text: "systemctl stop firewalld.service", butType: '',},


      ]
    };
  },
  mounted() {
  },
  methods: {
    //切换安装说明
    operationClick(text) {
      this.active = text;
      for (let i = 0; i < this[`${this.active}Json`].length; i++) {
        this[`${this.active}Json`][i].butType = '';
        // jdk 使用
        if (this[`${this.active}Json`][i].state == 1) {
          let vica = `JAVA_HOME=/data/jdk1.8.0_271
PATH=$JAVA_HOME/bin:$PATH
CLASSPATH=$JAVA_HOME/jre/lib/ext:$JAVA_HOME/lib/tools.jar
export PATH JAVA_HOME CLASSPATH`;
          this[`${this.active}Json`][i].text = vica;
          continue
        }
        if (this[`${this.active}Json`][i].state == 2) {
          let vica = `datadir=/data/mysql/data
        port=3306
        log-error=/data/mysql/data/mysql.log
        pid-file=/data/mysql/data/mysql.pid`;
          this[`${this.active}Json`][i].text = vica;
          continue
        }
      }
    },
    //复制架构操作
    copyLink(data, key) {
      let clipboard = new Clipboard('.tag', {
        text: function () {
          return data
        }
      })
      clipboard.on('success', e => {
        console.log(e);
        this[`${this.active}Json`][key].butType = 'success';
        this.$message({message: '复制成功', showClose: true, type: 'success'})
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        console.log(e);
        this.$message({message: '复制失败,', showClose: true, type: 'error'})
        clipboard.destroy()
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.newServer-css-content {
  .title {
    font-size: 16px;
    margin: 15px;
  }

  .copy-content {
    li {
      margin-bottom: 5px;
    }

    .el-button--small {
      margin-right: 8px;
    }
  }
}
</style>
